<template>
  <div>
    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
      全选
    </el-checkbox>
    <el-form label-width="140px" :model="formData" size="mini">
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          固定列
        </el-col>
      </el-row>
      <el-row>
        <!-- basePartName -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsFixBasePartName">
            {{ $t('FdData.basePartName') }}
          </el-checkbox>
        </el-col>
        <!--basePartNo  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsFixBasePartNo">
            {{ $t('FdData.basePartNo') }}
          </el-checkbox>
        </el-col>
        <!--newPartName  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsFixNewPartName">
            {{ $t('FdData.newPartName') }}
          </el-checkbox>
        </el-col>
        <!-- newPartNo -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsFixNewPartNo">{{ $t('FdData.newPartNo') }}</el-checkbox>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          Header
        </el-col>
      </el-row>
      <el-row>
        <!--rdFunction  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsRDFunction">{{ $t('FdData.rdFunction') }}</el-checkbox>
        </el-col>
        <!-- category -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsCategory">{{ $t('FdData.category') }}</el-checkbox>
        </el-col>
        <!-- itemNo -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsItemNo">{{ $t('FdData.itemNo') }}</el-checkbox>
        </el-col>
        <!-- rdOwner -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsRDOwner">{{ $t('FdData.rdOwner') }}</el-checkbox>
        </el-col>
        <!--trackingOption  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsTrackingOption">
            {{ $t('FdData.trackingOption') }}
          </el-checkbox>
        </el-col>
        <!--optionType  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsOptionType">
            {{ $t('FdData.optionType') }}
          </el-checkbox>
        </el-col>
        <!--statusCompare  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsStatusCompare">
            {{ $t('FdData.statusCompare') }}
          </el-checkbox>
        </el-col>
        <!--gapType  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsGapType">
            {{ $t('FdData.gapType') }}
          </el-checkbox>
        </el-col>
        <!--gapReason  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsGapReason">
            {{ $t('FdData.gapReason') }}
          </el-checkbox>
        </el-col>
        <!-- pirDelta -->
        <el-col v-if="showDiffOptionsByPageId" :span="12">
          <el-checkbox v-model="formData.IsPirDelta">
            {{ $t('FdData.pirDelta') }}
          </el-checkbox>
        </el-col>
        <!-- pirDelta -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsPbmCost">
            {{ $t('FdData.pbmCost') }}
          </el-checkbox>
        </el-col>
      </el-row>
      <!-- Base Project -->
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          Base Project
        </el-col>
      </el-row>
      <el-row>
        <!-- basePartName -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBasePartName">
            {{ $t('FdData.basePartName') }}
          </el-checkbox>
        </el-col>
        <!--basePartNo  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBasePartNo">
            {{ $t('FdData.basePartNo') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseMaterialGroup">
            {{ $t('FdData.MaterialGroup') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseMaterialDetail">
            {{ $t('FdData.MaterialDetail') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseMaterialColor">
            {{ $t('FdData.baseMaterialColor') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseSize">{{ $t('FdData.baseSize') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseQty">{{ $t('FdData.baseQty') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseWeight">{{ $t('FdData.baseWeight') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseIdProcess">
            {{ $t('FdData.baseIdProcess') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseSupplier">
            {{ $t('FdData.baseSupplier') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseSupplierPn">
            {{ $t('FdData.baseSupplierPn') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseRemark">{{ $t('FdData.baseRemark') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsBaseViewPic">
            {{ $t('FdData.baseViewPic') }}
          </el-checkbox>
        </el-col>
        <!-- baseSapStandardPrice -->
        <el-col v-if="showDiffOptionsByPageId" :span="12">
          <el-checkbox v-model="formData.IsBaseSapStandardPrice">
            {{ $t('FdData.baseSapStandardPrice') }}
          </el-checkbox>
        </el-col>
        <!-- basePrice -->
        <el-col v-if="showDiffOptionsByPageId" :span="12">
          <el-checkbox v-model="formData.IsBasePrice">
            {{ $t('FdData.basePrice') }}
          </el-checkbox>
        </el-col>
        <!-- baseTecCost -->
        <el-col v-if="showDiffOptionsByPageId" :span="12">
          <el-checkbox v-model="formData.IsBaseTecCost">
            {{ $t('FdData.baseTecCost') }}
          </el-checkbox>
        </el-col>
      </el-row>
      <!-- New Project -->
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          New Project
        </el-col>
      </el-row>
      <el-row>
        <!--newPartName  -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewPartName">
            {{ $t('FdData.newPartName') }}
          </el-checkbox>
        </el-col>
        <!-- newPartNo -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewPartNo">{{ $t('FdData.newPartNo') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewCommodity">
            {{ $t('FdData.commodity') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewTempPartNo">
            {{ $t('FdData.newTempPartNo') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewMaterialGroup">
            {{ $t('FdData.MaterialGroup') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewMaterialDetail">
            {{ $t('FdData.MaterialDetail') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewMaterialColor">
            {{ $t('FdData.newMaterialColor') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewSize">{{ $t('FdData.newSize') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewQty">{{ $t('FdData.newQty') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewWeight">{{ $t('FdData.newWeight') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewIdProcess">
            {{ $t('FdData.newIdProcess') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewSupplier">
            {{ $t('FdData.newSupplier') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewSupplierPn">
            {{ $t('FdData.newSupplierPn') }}
          </el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewTooling">{{ $t('FdData.newTooling') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewRemark">{{ $t('FdData.newRemark') }}</el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="formData.IsNewViewPic">{{ $t('FdData.newViewPic') }}</el-checkbox>
        </el-col>
        <!-- newSapStandardPrice -->
        <el-col v-if="showDiffOptionsByPageId" :span="12">
          <el-checkbox v-model="formData.IsNewSapStandardPrice">
            {{ $t('FdData.newSapStandardPrice') }}
          </el-checkbox>
        </el-col>
        <!-- newPrice -->
        <el-col v-if="showDiffOptionsByPageId" :span="12">
          <el-checkbox v-model="formData.IsNewPrice">
            {{ $t('FdData.newPrice') }}
          </el-checkbox>
        </el-col>
        <!-- newTecCost -->
        <el-col v-if="showDiffOptionsByPageId" :span="12">
          <el-checkbox v-model="formData.IsNewTecCost">
            {{ $t('FdData.newTecCost') }}
          </el-checkbox>
        </el-col>
      </el-row>
      <!-- GCM -->
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          GCM
        </el-col>
      </el-row>
      <el-row>
        <!-- gcmFunction -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsGcmFunction">
            {{ $t('FdData.gcmFunction') }}
          </el-checkbox>
        </el-col>
        <!-- GcmOwner -->
        <el-col :span="12">
          <el-checkbox v-model="formData.IsGcmOwner">{{ $t('FdData.gcmOwner') }}</el-checkbox>
        </el-col>
      </el-row>
    </el-form>

    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
export default {
  name: 'FdCellShowSet',
  components: {},
  props: {
    pageId: {
      type: String
    },
    cellIsShow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {},
      // 控制全选状态的复选框
      checkAll: false,
      isIndeterminate: true
    }
  },
  computed: {
    // 判断pageId展示不同的选项
    showDiffOptionsByPageId() {
      return !(this.pageId && this.pageId === 'FdDataView')
    },
    // 部分页面GCM控制开关关闭
    isGcmEdit() {
      return !(this.pageId && this.pageId === ('FdAssignPane' || 'FdFocalPane'))
    }
  },
  watch: {
    // 监听formData的值控制 全选状态的展示
    formData: {
      handler() {
        const value = Array.from(new Set(Object.values(this.formData)))
        if (value && value.length > 1) {
          // 只要有两个值状态就是不确定
          this.isIndeterminate = true
        } else {
          if (value[0] === true) {
            this.checkAll = true
            this.isIndeterminate = false
          } else {
            this.checkAll = this.isIndeterminate = false
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.formData = this.$deepCopy(this.cellIsShow)
  },
  mounted() {},
  methods: {
    handleCheckAllChange(val) {
      for (const key in this.formData) {
        this.formData[key] = val
      }
    },

    save() {
      const data = this.formData
      if (data.IsFixBasePartName && data.IsBasePartName) {
        data.IsBasePartName = false
      }
      if (data.IsFixBasePartNo && data.IsBasePartNo) {
        data.IsBasePartNo = false
      }
      if (data.IsFixNewPartName && data.IsNewPartName) {
        data.IsNewPartName = false
      }
      if (data.IsFixNewPartNo && data.IsNewPartNo) {
        data.IsNewPartNo = false
      }
      this.$emit('saveOperationData', this.formData)
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
